{{ define "content" }}
<h1 class="entry-title">我的工具列表</h1>
<div class="tool-list">
    {{ range .List }}
    <div class="item has-border">
        <img src="{{ .ImageUrl }}" alt="{{ .Title }}">
        <div class="title">{{ .Title }}</div>
        <p>{{ .Desc }}</p>
        <div class="link">
            <a target="_blank" href="{{ .DownloadUrl }}"><i>点击下载<span>{{ .Code }}</i></span></a>
            <a target="_blank" href="{{ .SourceUrl }}"><i>源代码</i></a>
        </div>
    </div>
    {{ end }}
</div>
<br>
{{ end }}

{{ define "extend_head" }}
<style>
.tool-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.tool-list .item {
    margin: 10px;
    padding: 10px;
    max-width: 300px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.tool-list .item img {
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
}

.tool-list .item p {
    margin:5px 0px;
}

.tool-list .item .title {
    font-weight: bold;
    text-align: center;
}

.tool-list .item .link {
    font-size: 13px;
    display: flex;
    justify-content: space-between;
}

.tool-list .item img {
    width: 300px;
    height: 170px;
}

.tool-list .item p {
    color: #333;
}
</style>
{{ end }}
